<template>
  <div class="PageSpecsWindow">
    <div class="cover"></div>
    <div class="windowBox">
      <header>
        <h4 class="ellipsis">{{sku.foodName}}</h4>
        <svg class="closeButton" width="16" height="16" xmlns="http://www.w3.org/2000/svg" version="1.1" @click="close">
          <line x1="0" y1="0" x2="16" y2="16" stroke="#666" stroke-width="1.2"></line>
          <line x1="0" y1="16" x2="16" y2="0" stroke="#666" stroke-width="1.2"></line>
        </svg>
      </header>

      <div class="content">
        <h5>规格：</h5>
        <ul>
          <li
            :class="{actived: focusIndex == i}"
            v-for="(sku, i) in skus"
            :key="sku.skuId"
            @click="focus(i)"
          >{{sku.skuName}}</li>
        </ul>
      </div>

      <footer>
        <div class="price">
          <span>¥</span>
          <span>{{sku.skuPrice}}</span>
        </div>
        <section class="cartControl">
          <span>
            <svg @click="cartEvents.reduce(sku.foodId, sku.skuId)">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
            </svg>
          </span>
          <span class="cartNum">{{orderNum}}</span>
          <svg class="cartAddIcon" @click="cartEvents.add(sku.foodId, sku.skuId)">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
          </svg>
        </section>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      focusIndex: 0,
      skus: this.args.skus
    };
  },
  props: ['args', 'cartEvents', 'order'],
  computed: {
    sku() {
      return this.skus[this.focusIndex];
    },
    orderNum() {
      return (this.order && this.order[this.sku.skuId]) || 0;
    }
  },
  methods: {
    focus(i) {
      if (this.focusIndex !== i) {
        this.focusIndex = i;
      }
    },
    close() {
      this.args.close();
    }
  }
};
</script>

<style lang="scss">
@import '../../../styles/mixin';
.PageSpecsWindow {
  .cover {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 17;
  }
  .windowBox {
    position: fixed;
    top: 35%;
    left: 15%;
    width: 70%;
    background-color: #fff;
    z-index: 18;
    border: 1px;
    border-radius: 0.2rem;
    header {
      h4 {
        @include sc(0.7rem, #222);
        font-weight: normal;
        text-align: center;
        padding: 0.5rem;
      }
      .closeButton {
        position: absolute;
        right: 0.5rem;
        top: 0.5rem;
      }
    }
    .content {
      padding: 0.5rem;
      h5 {
        @include sc(0.6rem, #666);
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0.4rem 0;
        li {
          font-size: 0.6rem;
          padding: 0.3rem 0.5rem;
          border: 0.05rem solid #ddd;
          border-radius: 0.2rem;
          margin-right: 0.5rem;
          margin-bottom: 0.2rem;
        }
        .actived {
          border-color: #3199e8;
          color: #3199e8;
        }
      }
    }
    footer {
      @include fj;
      align-items: center;
      background-color: #f9f9f9;
      padding: 0.5rem;
      border: 1px;
      border-bottom-left-radius: 0.2rem;
      border-bottom-right-radius: 0.2rem;

      .cartControl {
        display: flex;
        align-items: center;
        span {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        svg {
          @include wh(0.9rem, 0.9rem);
          fill: #3190e8;
        }
        .specs_reduce_icon {
          fill: #999;
        }
        .cartNum {
          @include sc(0.65rem, #666);
          min-width: 1rem;
          text-align: center;
          font-family: Helvetica Neue, Tahoma;
        }
      }
    }
  }
}
</style>
